<template>
  <div class="file-converter-table">
    <el-table :data="fileList" style="width: 100%" height="120">
      <el-table-column
        prop="taskId"
        label="任务ID"
        width="300"
      ></el-table-column>
      <el-table-column label="转换进度" width="300">
        <template #default="{ row }">
          <el-progress
            :percentage="row.progress"
            :status="row.status"
          ></el-progress>
        </template>
      </el-table-column>
      <el-table-column
        prop="statusText"
        label="状态"
        width="200"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    addFile() {
      const newFile = {
        taskId: `file${this.fileList.length + 1}.txt`,
        progress: 0,
        status: "success",
        statusText: "待处理",
      };
      this.fileList.unshift(newFile); // 将新项目插入到数组开头
    },
    updateTaskProgress(taskId, progress) {
      const task = this.fileList.find(item => item.taskId === taskId);
      if (task) {
        task.progress = progress;
        if (progress >= 100) {
          task.status = 'success';
          task.statusText = '完成';
        } else {
          task.status = 'success';
          task.statusText = '转换中';
        }
      } else {
        // 如果任务不存在，创建新任务
        const newTask = {
          taskId: taskId,
          progress: progress,
          status: 'success',
          statusText: progress >= 100 ? '完成' : '转换中'
        };
        this.fileList.unshift(newTask);
      }
    },
    updateTaskStatus(taskId, status) {
      const task = this.fileList.find(item => item.taskId === taskId);
      if (task) {
        if (status === 'error') {
          task.status = 'exception';
          task.statusText = '失败';
        } else if (status === 'done') {
          task.status = 'success';
          task.statusText = '完成';
          task.progress = 100;
        }
      }
    }
  },
};
</script>

<style scoped>
.file-converter-table {
  padding: 0px;
}

.el-table {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.el-table th,
.el-table td {
  text-align: center;
}

.el-button {
  margin-top: 20px;
}

/* 去掉表格每行的内边距 */
:deep(.el-table__cell) {
  padding: 0 !important;
}
</style>
